<template>
  <div class="home">
    <section class="groupB">
      <!-- <el-carousel trigger="click" height="150px" >
        <el-carousel-item v-for="(item,index)  in bannerArr" :key="index">
          <img style="width:100%" :src='item.PIC_URL' alt />
        </el-carousel-item>

      </el-carousel> -->
       <el-carousel trigger="click" height="150px">
        <el-carousel-item>
          <img style="width:100%" src="../../assets/img/banner.png" alt />
        </el-carousel-item>
        <el-carousel-item>
          <img style="width:100%" src="../../assets/img/banner.png" alt />
        </el-carousel-item>
      </el-carousel>
      <section class="SwiperCon" v-if="!NOcard">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide class="swiperIn1">
            <section class="swiperNone borderR" @click="AddCard()">
              <div class="Select">
                <img class="imgAdd" src="../../assets/img/addcard.png" alt />
                <h2 class="fontsM imgH">注册或者绑定健康卡</h2>
              </div>
              <p class="fonts fontCfff">您还没有注册电子健康卡</p>
            </section>
          </swiper-slide>
        </swiper>
      </section>
      <section class="SwiperCon" v-if="NOcard">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide class="swiperIn1" >
            <section class="swiperIn" @click="Code()">
              <div class="card_center">
                <div class="center_left">
                  <span class="left_top">爱因斯坦</span>
                  <span class="left_bottom">4127*********1234</span>
                </div>
                <div class="center_right">
                  <img class="right_top" src="../../assets/img/logo_.png" alt />
                  <img class="right_bottom" src="../../assets/img/qrcode.png" alt />
                </div>
              </div>
            </section>
          </swiper-slide>
          <swiper-slide class="swiperIn1">
            <section class="swiperIn" @click="Code()">
              <div class="card_center">
                <div class="center_left">
                  <span class="left_top">秦始皇</span>
                  <span class="left_bottom">4127*********1234</span>
                </div>
                <div class="center_right">
                  <img class="right_top" src="../../assets/img/logo_.png" alt />
                  <img class="right_bottom" src="../../assets/img/qrcode.png" alt />
                </div>
              </div>
            </section>
          </swiper-slide>
          <swiper-slide class="swiperIn1">
            <section class="swiperIn" @click="Code()">
              <div class="card_center">
                <div class="center_left">
                  <span class="left_top">李宁</span>
                  <span class="left_bottom">4127*********1234</span>
                </div>
                <div class="center_right">
                  <img class="right_top" src="../../assets/img/logo_.png" alt />
                  <img class="right_bottom" src="../../assets/img/qrcode.png" alt />
                </div>
              </div>
            </section>
          </swiper-slide>
          <swiper-slide class="swiperIn1">
            <section class="swiperIn" @click="Code()">
              <div class="card_center">
                <div class="center_left">
                  <span class="left_top">陈圆圆</span>
                  <span class="left_bottom">4127*********1234</span>
                </div>
                <div class="center_right">
                  <img class="right_top" src="../../assets/img/logo_.png" alt />
                  <img class="right_bottom" src="../../assets/img/qrcode.png" alt />
                </div>
              </div>
            </section>
          </swiper-slide>
        </swiper>
      </section>
      <section class="Select Girdcon">
        <div @click="SearchBalance()">
          <img src="../../assets/img/Balance.png" alt />
          <p class="fonts">查询余额</p>
        </div>
        <div @click="Recharge()">
          <img src="../../assets/img/Recharge.png" alt />
          <p class="fonts">充值</p>
        </div>
        <div @click="Recording()">
          <img src="../../assets/img/consum.png" alt />
          <p class="fonts">消费记录</p>
        </div>
        <div @click="Card()">
          <img src="../../assets/img/Card.png" alt />
          <p class="fonts">卡包</p>
        </div>
      </section>
    </section>
    <!-- 门诊服务 -->
    <section class="group">
      <div class="Select HomeTiele">
        <h3 class="fonts HomeH">门诊服务</h3>
        <p class="fonsMiddle fontC"  @click="Serve()">更多 ></p>
      </div>
      <div class="Select">
        <div class="MZ_regist borderR" @click="Registered()">
          <img src="../../assets/img/GH.png" alt />
          <h2 class="fontCfff fonts">挂号服务</h2>
          <p class="fontCfff fontsMin">预约挂号、排队查询</p>
        </div>
        <section class="SelectS">
          <div class="MZ_charge borderR Select" @click="Pay()">
            <section class="chargeimg">
              <img src="../../assets/img/MZcharge.png" alt />
            </section>
            <section class="chargef">
              <h3 class="fontCfff fonts">门诊充值缴费查询</h3>
              <p class="fontCfff fontsMin">门诊缴费，充值查询...</p>
            </section>
          </div>
          <div class="MZ_search borderR Select" @click="Search()">
            <section class="chargeimg">
              <img src="../../assets/img/search.png" alt />
            </section>
            <section class="chargef">
              <h3 class="fontCfff fonts">检查结果查询</h3>
              <p class="fontCfff fontsMin">检查结果，病例查询...</p>
            </section>
          </div>
        </section>
      </div>
      <section class="MZ_title">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane name="first">
            <span slot="label">
              我的提醒
              <el-badge :value="20"></el-badge>
              <span v-if="More" @click="Notice()" class="fonsMiddle fontC MZ_p MZ_p1">更多 ></span>
            </span>
            <section class="Select">
              <span class="Circle"></span>
              <div class="homeJY">
                <h3 class="fonts">平顶山市第一人民医院-消化内科</h3>
                <p class="fonsMiddle">特朗普，请在2020-02-10 13:00前完成取号</p>
                <p class="fonsMiddle">2020-02-10 09:59 就医提醒</p>
              </div>
            </section>
          </el-tab-pane>
          <!-- <el-tab-pane name="second">
            <span slot="label">
              我的医生
              <el-badge :value="10"></el-badge>
              <span v-if="!More" class="fonsMiddle fontC MZ_p" @click="Collect()">更多 ></span>
            </span>
            <section class="Select">
              <span class="Doctor">
                <img src="../../assets/img/Touxiang.png" alt />
              </span>
              <div class="homeJY">
                <h3 class="fonts">刘晓燕 - 主任医师</h3>
                <p class="fonsMiddle">外科门诊</p>
                <p class="fonsMiddle">擅长：胸外科，糖尿病，高血压，高血脂等的诊治</p>
              </div>
            </section>
          </el-tab-pane> -->
        </el-tabs>
      </section>
    </section>
    <!-- 健康卡小助手 -->
    <section class="group">
      <div class="Select HomeTiele">
        <h3 class="fonts HomeH">健康小助手</h3>
        <p class="fonsMiddle fontC" @click="Assistant()">更多 ></p>
      </div>
      <div class="JKall" @click="AssDetail()">
        <section class="JKimg">
          <img src="../../assets/img/image1.jpg" alt />
        </section>
        <section class="JKcon">
          <h3 class="fonts">什么是居民健康卡？</h3>
          <p class="fontsMin fontC">居民健康卡是基于区域卫生信息平台的信息平台信息</p>
        </section>
      </div>
      <div class="JKall" @click="AssDetail()">
        <section class="JKimg">
          <img src="../../assets/img/image1.jpg" alt />
        </section>
        <section class="JKcon">
          <h3 class="fonts">什么是居民健康卡？</h3>
          <p class="fontsMin fontC">居民健康卡是基于区域卫生信息平台的信息平台信息</p>
        </section>
      </div>
      <div class="JKall" @click="AssDetail()">
        <section class="JKimg">
          <img src="../../assets/img/image1.jpg" alt />
        </section>
        <section class="JKcon">
          <h3 class="fonts">什么是居民健康卡？</h3>
          <p class="fontsMin fontC">居民健康卡是基于区域卫生信息平台的信息平台信息</p>
        </section>
      </div>
      <div class="JKall" @click="AssDetail()">
        <section class="JKimg">
          <img src="../../assets/img/image1.jpg" alt />
        </section>
        <section class="JKcon">
          <h3 class="fonts">什么是居民健康卡？</h3>
          <p class="fontsMin fontC">居民健康卡是基于区域卫生信息平台的信息平台信息</p>
        </section>
      </div>
    </section>
    <Tabbar></Tabbar>
    <Loading v-if="ShowLoading"></Loading>
  </div>
</template>

<script>
import Tabbar from '../../components/Tabbar'
import Loading from '../../components/Loading'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'Home',
  data () {
    return {
      ShowLoading: false,
      NOcard: true, //  无卡显示
      //  swiper 触摸滑动
      swiperOptions: {
        autoplay: false,
        notNextTick: true,
        effect: 'coverflow',
        centeredSlides: true,
        spaceBetween: '18%',
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 300,
          modifier: 1,
          slideShadows: false
        }
      },
      //  tab 栏目
      activeName: 'first',
      More: true,
      type: 'SLIDER',
      bannerArr: ''

    }
  },
  mounted () {
    // 轮播图
    var url = 'home/banner/list?type=' + this.type
    this.$axios({
      method: 'post',
      url: url
    })
      .then(res => {
        // console.log(res.data)
        this.bannerArr = res.data.data
      })
      // .catch(res => {
      //   console.log(res)
      // })
  },

  components: {
    Tabbar,
    Loading,
    Swiper,
    SwiperSlide
  },
  created () {
  },
  methods: {
    //  我的收藏
    Collect () {
      this.$router.push({
        path: '/Collect'
      })
    },
    handleClick (tab, event) {
      //  显示相应的更多
      this.More = !this.More
    },
    // 余额快查
    SearchBalance () {
      this.$router.push({
        path: '/SearchBalance'
      })
    },
    //  卡包
    Card () {
      this.$router.push({
        path: '/Card'
      })
    },
    //  充值
    Recharge () {
      this.$router.push({
        path: '/Recharge'
      })
    },
    //  电子健康卡 进入二维码页面
    Code () {
      this.$router.push({
        path: '/Code'
      })
    },
    // 消费记录
    Recording () {
      this.$router.push({
        path: '/Recording'
      })
    },
    //  消息中心
    Notice () {
      this.$router.push({
        path: '/Notice'
      })
    },
    //  更多服务
    Serve () {
      this.$router.push({
        path: '/Hospital'
      })
    },
    //  健康卡小助手
    Assistant () {
      this.$router.push({
        path: '/Assistant'
      })
    },
    //  健康卡助手详情页
    AssDetail () {
      this.$router.push({
        path: '/AssDetail'
      })
    },
    //  无卡时，绑定健康卡
    AddCard () {
      this.$router.push({
        path: '/Login'
      })
    },
    //  门诊   挂号
    Registered () {
      this.$router.push({
        path: '/Registered'
      })
    },
    //  门诊充值
    Pay () {
      this.$router.push({
        path: '/Pay'
      })
    },
    //  检查结果查询
    Search () {
      this.$router.push({
        path: '/TestResult'
      })
    }
  }
}
</script>

<style scoped>

.home {
  padding-top: 0;
  padding-bottom: 1rem;
}
html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiperIn {
  width: 6.2rem;
  height: 3.5rem;
  background: url(../../assets/img/cardnewbg.png) no-repeat center center;
  background-size: 100%;
  display: block;
  margin: 0.2rem 0;
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.6);
}
.swiperIn1 {
  width: 6.2rem;
  height: 3.5rem;
  /* display: block; */
  margin: 0.2rem 0;
  background-color: none;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__container {
  width: 150px;
}
</style>
